<template>
    <div class="container">
      <!-- 单选组 -->
        <el-radio-group v-model="radio" v-if="isShowRadio" @change="updateData">
          <!-- 行 -->
          <el-row v-for="(item,index) in chooseList" :key="index" type="flex" align="middle" style="margin-bottom: 10px">
            <!-- 列 -->
            <el-col :span="0.1">
              <el-radio :label="item.code">{{item.code + '：'}}</el-radio>
            </el-col>
            <el-col :span="4">
              <el-input v-model="item.title"/>
            </el-col>
            <el-col :span="1">
              <el-upload
                action="#"
                list-type="picture-card"
                >
                <i class="text" v-text="'点击上传图片'"></i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-radio-group>
        <!-- 多选组 -->
        <el-checkbox-group v-model="checkList" v-else @change="updateData">
           <!-- 行 -->
          <el-row v-for="(item,index) in chooseList" :key="index" type="flex" align="middle" style="margin-bottom: 10px">
            <!-- 列 -->
            <el-col :span="0.1">
              <el-checkbox :label="item.code">{{item.code + '：'}}</el-checkbox>
            </el-col>
            <el-col :span="4">
              <el-input v-model="item.title"/>
            </el-col>
            <el-col :span="1">
              <el-upload
                action="#"
                list-type="picture-card"
                >
                <i class="text" v-text="'点击上传图片'"></i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
  props: {
    chooseList: {
      type: Array,
      required: true
    },
    isShowRadio: {
      default: true,
      type: Boolean
    },
    questionType: {
      default: '1',
      type: String
    },
    isShowChoose: {
      type: Boolean
    },
    question: {
      type: String
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      radio: '', // 单选列表
      checkList: [] // 多选列表
    }
  },
  watch: {
    chooseList () {
      this.dataInit()
    }
  },
  created () {
    this.dataInit()
  },
  methods: {

    // 数据改变
    updateData () {
      this.$emit('choiceData', this.radio, this.checkList)
    },
    // 初始化init
    dataInit () {
      // 回写 或者 新增
      if (this.chooseList[0].title || this.question) {
        console.log(this.chooseList[0].title)
        console.log(this.question)
        // 有值说明回写
        if (this.questionType === '1') {
          // 单选回写
          this.$emit('update:isShowRadio', true)
          const obj = this.chooseList.find(item => item.isRight === 1)
          obj.code ? this.radio = obj.code : this.radio = ''
        } else if (this.questionType === '2') {
          // 多选回写
          this.$emit('update:isShowRadio', false)
          this.checkList = this.chooseList.map(item => item.isRight === 1 ? item.code : '')
        } else {
          this.checkList = []
          this.radio = ''
          this.$emit('update:isShowChoose', false)
        }
      } else {
        this.$emit('update:isShowRadio', true)
        this.checkList = []
        this.radio = ''
      }
    }
  }
}
</script>

<style scoped>
.container {
    margin-bottom:10px;
}
::v-deep .el-upload{
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin-left: 5px;
    cursor: pointer;
    position: relative;

}

.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

i.el-icon-circle-close {
  font-size: 22px;
  position: absolute;
  right: -10px;
  top: -5px;

}
i.text {
  font-size: 10px;
}

</style>
